<template>
  <div class="copyer-drawer">
    <el-drawer
      v-model="copyerDrawer"
      :append-to-body="true"
      direction="rtl"
      size="550px"
    >
      <template #header>
        <div>
          <input
            v-if="isInput"
            v-model="copyerConfig.nodeName"
            type="text"
            placeholder="抄送人"
            @blur="isInput=false"
          >
          <el-link v-else @click.stop="isInput=true">
            <el-icon class="m-icon"><i-ep-edit-pen /></el-icon>
            {{ copyerConfig && copyerConfig.nodeName }}
          </el-link>
        </div>
      </template>
      <template #default>
        <div class="copyer_content" @click="isInput=false">
          <el-button type="primary" @click="userDialogVisible=true">选择抄送人</el-button>
          <div style="display: flex;margin-top: 10px;flex-wrap: wrap;">
            <el-tag
              v-for="(tag,index) in copyerConfig.nodeUserList"
              :key="index"
              style="margin: 5px;"
              closable
              effect="plain"
              type="info"
              @close="handleClose(tag)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
          <el-checkbox v-model="ccSelfSelectFlag" label="允许发起人自选抄送人" />
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onSave">保存</el-button>
        </div>
      </template>
    </el-drawer>
    <user-dialog
      v-model="copyerConfig.nodeUserList"
      v-model:visible="userDialogVisible"
      :tree-list="treeList"
      :check-strictly="false"
    />
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import func from '../../utils/preload.js'

export default {
  props: {
    /** 成员列表 */
    treeList: {
      type: Array,
      default: () => []
    }
  },
  setup() {
    const store = useStore()
    const copyerDrawer = computed({
      get() {
        return store.state.app.workflow.copyerDrawer
      },
      set(flag) {
        store.dispatch('app/workflow/setCopyer', flag)
      }
    })

    /** 编辑标题 */
    const isInput = ref(false)

    /** 选择成员弹窗 */
    const userDialogVisible = ref(false)

    const copyerConfig = computed(() => store.state.app.workflow.copyerConfig1.value || { nodeUserList: [] })

    /** 允许发起人自选抄送人 */
    const ccSelfSelectFlag = computed({
      get() {
        return copyerConfig.value.ccSelfSelectFlag === 1
      },
      set(flag) {
        copyerConfig.value.ccSelfSelectFlag = flag ? 1 : 0
      }
    })

    /** 删除指定成员 */
    const handleClose = (tag) => {
      copyerConfig.value.nodeUserList.splice(copyerConfig.value.nodeUserList.indexOf(tag), 1)
    }

    /** 保存 */
    const onSave = () => {
      copyerConfig.value.error = !func.copyerStr(copyerConfig.value)
      store.dispatch('app/workflow/setCopyerConfig', {
        value: copyerConfig,
        flag: true,
        id: store.state.app.workflow.copyerConfig1.id
      })
      onCancel()
    }

    /** 取消 */
    const onCancel = () => {
      store.dispatch('app/workflow/setCopyer', false)
    }

    return {
      copyerDrawer,
      isInput,
      userDialogVisible,
      copyerConfig,
      ccSelfSelectFlag,
      handleClose,
      onSave,
      onCancel
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
